import { defineComponent, Teleport, Transition } from 'vue'
import { modalProps } from './types';

import "./index.scss"

export default defineComponent({
    name: 'VuaModal',
    props: modalProps,
    emits: ['update:modelValue', 'close'],
    setup(props, { emit, slots, attrs }) {

        const close = () => {
            emit('close')

            emit('update:modelValue', false)
        }



        const rendeModal = () => {
            if (props.modelValue) {
                return (
                    <div class="vua-modal" onClick={close}>
                        <div
                            class="vua-modal__content"
                            style={attrs.style as string}
                            onClick={(e: Event) => { e.stopPropagation() }}
                        >
                            <div class="close" onClick={close}>
                                <svg t="1650358598892" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2568" width="100%" height="100%"><path d="M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z" p-id="2569"></path></svg>
                            </div>
                            {slots.default ? slots.default() : ''}
                        </div>
                    </div>
                )
            }
        }

        return () => {
            return (
                <Teleport to="body" style={attrs.style as string}>
                    <Transition name="modal">
                        {rendeModal()}
                    </Transition>
                </Teleport>
            )
        }
    }
})